<template>
	<view class="">
		<form @submit="formSubmit">
					<scroll-view scroll-y>
						
						
					
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									注册日期
								</view>
							</view>
							<view class="right">
								<view class="right">
									<picker mode="date"  @change="registrationDateChange" :value="registrationDate" name="date" start="1970-01-01" end="2050-01-01">
										<view class="uni-input">{{registrationDate}}</view>
									</picker>
									<uni-icons type="forward" size="16"></uni-icons>
											
								</view>			
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									注册学期
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="registrationSemester" placeholder="输入学期" :value="registrationSemester"/>
										
							</view>
						</view>
						
					
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									注册类型
								</view>
							</view>
							<view class="right">
								<picker @change="registrationTypeChange" :value="registrationTypeIndex" :range="registrationTypeArray" name="registrationType">
									<view class="uni-input">{{registrationTypeArray[registrationTypeIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>	
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学期
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="semester" placeholder="输入代码" :value="semester"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									是否审核
								</view>
							</view>
							<view class="right">
								<picker @change="isApprovedChange" :value="isApprovedIndex" :range="isApprovedArray" name="registrationType">
									<view class="uni-input">{{isApprovedArray[isApprovedIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>	
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									备注
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="notes" placeholder="输入备注" :value="notes"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									异动信息
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="abnormalInfo" placeholder="输入异动情况" :value="abnormalInfo"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学籍变动情况
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="studentStatusChange" placeholder="输入学籍变动情况" :value="studentStatusChange"/>
										
							</view>
						</view>
						
						
						
				</scroll-view>		
						<view class="uni-btn-v">
							<button form-type="submit" class="but">确认提交</button>
						
						</view>
		</form>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const registrationDate =ref('0000-00-00');//注册日期
const registrationSemester =ref('');//注册学期
const registrationTypeArray =ref(['请选择','正常','异常']);//注册类型
const registrationTypeIndex =ref(0);
const semester =ref('');//学期
const isApprovedArray =ref(['请选择','否','是']);//是否审核
const isApprovedIndex =ref(0);
const notes =ref('');//备注
const abnormalInfo =ref('');//异动信息
const studentStatusChange =ref('');//学籍变动情况


const formSubmit = (e)=>{
	console.log(e);
}

// 注册类型
const registrationTypeChange = (e)=>{
	
	registrationTypeIndex.value = e.detail.value;
}


// 注册日期选择
const registrationDateChange = (e)=>{
	
	registrationDate.value = e.detail.value;
}

// 是否审核
const isApprovedChange = (e)=>{
	
	isApprovedIndex.value = e.detail.value;
}


</script>

<style lang='scss' scoped>
	 scroll-view{
	 	height:73vh;
	 	padding: 20rpx 0;
	 }
	 .rows{
	 	display: flex;
	 	justify-content: space-between;
	 	font-size: 26rpx;
	 	line-height: 60rpx;
	 	border-bottom: 1rpx solid #ccc;
	 	margin-bottom: 20rpx;
	 	.left{
	 		display: flex;
	 		justify-content: space-between;
	 		.star{
	 			color:red;
	 		}
	 	}
	 	.right{
	 		display: flex;
	 		justify-content: space-between;
	 		align-items: center;
	 		text-align: right;
	 		color:$xx-color-body;
	 	}
	 }
	 
	 .but{
	 			width: 500rpx;
	 			height: 80rpx;
	 			border-radius: 40rpx;
	 			background: $xx-color-body;
	 			color: #fff;
	 }
	 button::after{ border: none;}
	 button{
	 	line-height:80rpx;
	 }      
</style>